<template>
	<view class="page">
		<view class="top">
			<image style="width: 150rpx;height: 150rpx;" :src="form.userInfo.brandImage"></image>
			<view style="margin-left: 20rpx;  width: 300rpx">
				<view class="addcarname">{{form.userInfo.brandName}}</view>
				<view class="addcot">{{form.userInfo.seriesName}}</view>
			</view>
			<image style="width: 200rpx;height: 150rpx;" :src="form.userInfo.seriesImage"></image>
		</view>
		<view class="list">
			<u--form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="uForm">
				<u-form-item fontSize="12" label="车牌号:" prop="userInfo.carNumber" borderBottom ref="item1">
					{{form.userInfo.carNumber}}
				</u-form-item>
				<u-form-item label="司机姓名:" prop="userInfo.driverName" borderBottom ref="item1">
					{{form.userInfo.driverName}}
				</u-form-item>
				<u-form-item label="联系电话:" prop="userInfo.driverPhone" borderBottom ref="item1">
					{{form.userInfo.driverPhone}}
				</u-form-item>
				<u-form-item label="行驶证编号:" prop="userInfo.drivingLicense" borderBottom ref="item1">
					{{form.userInfo.drivingLicense}}
				</u-form-item>
				<u-form-item label="上牌时间:" prop="userInfo.cardsTime" borderBottom ref="item1" @click="show=true">
					{{form.userInfo.cardsTime}}
				</u-form-item>
				<u-form-item label="里程数:" prop="userInfo.mileage"ref="item1">
					{{form.userInfo.mileage}}
				</u-form-item>
			</u--form>
		</view>
		<view class="but" @click="unBindCar">解绑车辆</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker @confirm="picker" @cancel="pickershow=false" :show="pickershow" :columns="columns"
			keyName="firmName"></u-picker>
	</view>
</template>

<script>
	import {
		apiFindCarByCarId,
		apiUnBindCar,
	} from "@/api/car.js"
	import code from '../../../uni_modules/uview-ui/libs/config/props/code'
	export default {
		data() {
			return {
				toplist: "",
				show: false,
				pickershow: false,
				maxDate: '',
				columns: [

				],
				form: {
					userInfo: {
						driverName: "",
						driverPhone: "",
						enterpriseId: '', //企业id
						carNumber: "", //车牌号
						companyName: "", //企业名
						mileage: '', //里程
						drivingLicense: "" //行驶里程,
					}
				},
			}
		},
		beforeDestroy() {
			this.$store.commit("setcaruserInfo", {})
		},
		onLoad(e) {
			console.log(e)
			apiFindCarByCarId(e.carId).then(res => {
				console.log(res)
				this.form.userInfo = res.data
			})
		},
		methods: {
			unBindCar(){
				apiUnBindCar(this.form.userInfo.id).then(res=>{
					if(res.code === 200){
						uni.$u.toast('解绑成功~')
					}else{
						uni.$u.toast('操作失败~')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addcot {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.top {
		width: 718rpx;
		height: 180rpx;
		background-color: #fff;
		margin: 16rpx;
		padding: 14rpx;
		box-sizing: border-box;
		@include flex(row, space-between, center) font-size: 28rpx;

		.top-name {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}

	::v-deep .u-button {
		width: 184rpx !important;
		height: 64rpx !important;
		color: #000 !important;
	}

	.list {
		width: 718rpx;
		background-color: #fff;
		margin: 16rpx;
		padding: 14rpx;
		box-sizing: border-box;
	}

	.but {
		margin: 50rpx 40rpx;
		padding: 20rpx 200rpx;
		background-color: $theme-color;
		font-size: 32rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-size: 30rpx;
		padding-left: 10rpx;
	}
</style>